<template>
  <div class="flex flex-col h-full">
    <SearchContainer @search="queryList" @reset="() => formRef.resetFields()">
      <a-form ref="formRef" class="flex-1" :model="formState">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item name="wardName" label="病区">
              <SelectArea v-model:value="formState.wardName" use-cache @change="onChangeArea" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item name="bedNumber" label="床位号">
              <a-input v-model:value="formState.bedNumber" placeholder="请输入床位号" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item name="pyjm" label="姓名/助记码">
              <a-input v-model:value="formState.pyjm" placeholder="请输入姓名/助记码" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item name="isDispensed" label="已摆药">
              <a-switch v-model:checked="isDispensed" un-checked-value="0" checked-value="1" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </SearchContainer>
    <a-card class="mt-2 flex-1">
      <div class="mb-3">
        <a-button type="primary" :disabled="!selectedRowKeys.length || isDispensed != '0'" @click="onDispense(selectedRowKeys)">批量摆药</a-button>
        <!-- <a-button type="primary" class="ml-2">摆药单</a-button> -->
        <!-- <a-button class="ml-2">导出</a-button> -->
      </div>
      <BaseTable
        fill
        :loading="loading"
        column-code="00001031"
        :data-source="tableData"
        row-key="id"
        :row-selection="{ selectedRowKeys, onChange: onSelectChange }"
      >
        <template #bodyCell="{ column, record }">
          <div v-if="column.dataIndex === 'children'" :class="record.children.length > 1 ? 'link-border' : ''">
            <div v-for="(item, index) in record.children" :key="index" class="flex items-center px-2 hover:bg-slate-100">
              <div class="truncate" :title="item.sfxmb?.mc">{{ item.sfxmb?.mc }}</div>
              <span class="pl-2">{{ item.sfxmb?.gg }}</span>
              <template v-if="index == 0">
                <span class="pl-2">{{ record?.jlsl }}{{ record?.jldw }}</span>
                <span class="pl-2">{{ record.pl?.pl }}</span>
                <span class="pl-2">{{ record.yf?.fyff }}</span>
              </template>
            </div>
          </div>
          <template v-if="column.dataIndex === 'action' && isDispensed != '1'">
            <a-button type="primary" ghost size="small" @click="onDispense([record.id])"> 摆药 </a-button>
          </template>
        </template>
      </BaseTable>
    </a-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { post } from '@/utils/request'
import SearchContainer from '@/components/SearchContainer'
import BaseTable from '@/components/BaseTable'
import SelectArea from '@/components/SelectArea'

const loading = ref(false)
const tableData = ref([])
const formRef = ref(null)
const formState = ref({})
const isDispensed = ref('0')
const wordBh = ref('')
const selectedRowKeys = ref([])

const onDispense = async (ids) => {
  const res = await post('/inp/zyhs/doNoticePharmacy', ids)
  if (res.code !== 0) {
    message.error(res.msg || '操作失败')
  }
  message.success(res.msg)
  queryList()
}
const onChangeArea = (value) => {
  wordBh.value = value
  queryList()
}

const onSelectChange = (keys) => {
  selectedRowKeys.value = keys
}
//表格
const queryList = async () => {
  loading.value = true
  const { code, data } = await post('/inp/clinicalOrder/getClinicalOrderList', {
    bqbh: wordBh.value,
    cwh: formState.value.bedNumber,
    sfsy: '0',
    yzzxlb: '',
    zczt: '1',
    zybh: '',
    brPyjm: formState.value.pyjm,
    byzt: '',
    tjzt: '1'
  })

  if (code !== 0) return
  tableData.value = data.map((item) => {
    return {
      ...item,
      children: [{ sfxmb: item.sfxmb }, ...item.children]
    }
  })
  loading.value = false
}

onMounted(() => {
  // queryList()
})
</script>
<style lang="less" scoped>
:deep(.ant-table-row-expand-icon) {
  display: none;
}
</style>
